<template>
  <div class="mod-report-echarts">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="M_chartBarBox" class="chart-box"/>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="N_chartBarBox" class="chart-box"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import echarts from "echarts";
import { getScore } from "@/api/chart";
export default {
  data() {
    return {
      chartBar: null,
      chartRadar: null,
      scoreLists: [],
      barOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          show: true,
          right: "16%"
          // feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ['line', 'bar'] },
          //   // restore: { show: true },
          //   saveAsImage: { show: true }
          // }
        },
        legend: {
          data: [
            "总分",
            "课堂表现",
            "作业情况",
            "实验实践",
            "出勤情况",
            "其他",
            "卷面成绩"
          ]
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "总分/卷面",
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: "{value}"
            }
          },
          {
            type: "value",
            name: "表现分",
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "总分",
            type: "bar",
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            },
            data: []
          },
          {
            name: "课堂表现",
            type: "bar",
            yAxisIndex: 1,
            data: []
          },
          {
            name: "作业情况",
            type: "bar",
            yAxisIndex: 1,
            data: []
          },
          {
            name: "实验实践",
            type: "bar",
            yAxisIndex: 1,
            data: []
          },
          {
            name: "出勤情况",
            type: "bar",
            yAxisIndex: 1,
            data: []
          },
          {
            name: "其他",
            type: "bar",
            yAxisIndex: 1,
            data: []
          },
          {
            name: "卷面成绩",
            type: "bar",
            data: []
          }
        ]
      },
      radarOption: {
        title: {
          text: "成绩雷达图"
        },
        tooltip: {},
        legend: {
          data: ["得分情况"],
          right: 0
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: "课堂表现", max: 6 },
            { name: "作业情况", max: 6 },
            { name: "实验实践", max: 6 },
            { name: "出勤情况", max: 6 },
            { name: "其他", max: 6 },
            { name: "卷面成绩", max: 70 }
          ]
        },
        series: [
          {
            name: "得分情况",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [2, 3, 4, 5, 6, 50],
                name: "得分情况"
              }
            ]
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["roles", "userId"]),
    getAvSore() {
      let data = [0, 0, 0, 0, 0, 0];
      let len = this.scoreLists.length;
      this.scoreLists.forEach((item, index) => {
        Object.values(item.score).forEach((it, i) => {
          data[i] += it;
        });
      });
      data = data.map(item => {
        return (item = item / len);
      });
      return data;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getScore();
    },
    // 柱状图
    initChartBar() {
      this.chartBar = echarts.init(document.getElementById("M_chartBarBox"));
      this.chartBar.setOption(this.barOption);
    },
    initChartRadar() {
      this.chartRadar = echarts.init(document.getElementById("N_chartBarBox"));
      this.chartRadar.setOption(this.radarOption);
    },
    getScore() {
      getScore({
        student: this.userId
      }).then(res => {
        if (res.code === 1) {
          let data1 = [];
          let data2 = JSON.parse(JSON.stringify(this.barOption.series));
          this.scoreLists = res.data.scoreLists;
          res.data.scoreLists.forEach(item => {
            data1.push(item.course.courseName);
            let score = Object.values(item.score);
            data2[0].data.push(this.sumArr(score));
            score.forEach((it, index) => {
              data2[index + 1].data.push(it);
            });
          });
          this.barOption.xAxis[0].data = data1;
          this.barOption.series = data2;
          this.initChartBar();
          this.radarOption.series[0].data[0].value = this.getAvSore;
          this.initChartRadar();
        }
      });
    },
    sumArr(arr) {
      return arr.reduce(function(prev, cur) {
        return prev + cur;
      }, 0);
    }
  }
};
</script>
<style lang="scss">
.assessment-update .cell {
  padding: 0;
}
.mod-report-echarts {
  box-sizing: border-box;
  padding: 10px;
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    // min-height: 400px;
    width: 100%;
    height: calc(100vh - 150px);
  }
}
</style>

